<template>
  <div class="vc-layout">
    <a-layout>
      <a-layout-header>
        <div class="vc-logo">
          <slot name="logo"> Vue3 Components Project </slot>
        </div>
        <div class="vc-header">
          <slot name="header"></slot>
        </div>
        <div class="vc-user">
          <slot name="user">
            <a-dropdown placement="bottomRight" v-if="appStore?.user?.username">
              <a-space>
                <a-avatar
                  v-if="appStore?.user?.avatar"
                  size="small"
                  :src="appStore.user.avatar"
                ></a-avatar>
                <a-avatar v-else>
                  <template #icon>
                    <UserOutlined />
                  </template>
                </a-avatar>
                <span>{{ appStore?.user?.username }}</span>
              </a-space>
              <template #overlay>
                <a-menu :selected-keys="userSettings">
                  <a-menu-item key="user">
                    <UserOutlined />
                    个人信息
                  </a-menu-item>
                  <a-menu-item key="settings">
                    <SettingOutlined />
                    设置
                  </a-menu-item>
                  <a-menu-divider />
                  <a-menu-item key="logout" @click="logout">
                    <LogoutOutlined />
                    退出
                  </a-menu-item>
                </a-menu>
              </template>
            </a-dropdown>
            <a-space v-else>
              <a-button type="link">登录</a-button>
              <a-button type="link">注册</a-button>
            </a-space>
          </slot>
        </div>
      </a-layout-header>
      <a-layout>
        <a-layout-sider v-model:collapsed="collapsed" collapsible theme="light">
          <a-menu
            v-model:openKeys="openKeys"
            v-model:selectedKeys="selectedKeys"
            mode="inline"
            :inline-collapsed="collapsed"
          >
            <template v-for="item in routerList" :key="item.name">
              <template v-if="!item.children">
                <a-menu-item :key="item.name" @click="clickMenu(item)">
                  <template #icon>
                    <createIcon :icon="item.meta.icon" />
                  </template>
                  {{ item.meta.title }}
                </a-menu-item>
              </template>
              <template v-else>
                <SubMenu :key="item.name" :menu-info="item" />
              </template>
            </template>
          </a-menu>
        </a-layout-sider>
        <a-layout-content>
          <Breadcrumb />
          <div class="vc-container">
            <router-view />
          </div>
        </a-layout-content>
      </a-layout>
    </a-layout>
  </div>
</template>

<script setup>
  import { UserOutlined, SettingOutlined, LogoutOutlined } from '@ant-design/icons-vue';
  import { useAppStore } from '@/store';
  import createIcon from '@/utils/createIcon.js';
  import SubMenu from './SubMenu.vue';
  import Breadcrumb from './Breadcrumb.vue';
  const appStore = useAppStore();
  const userSettings = ref([]);
  const router = useRouter();
  const route = useRoute();
  const collapsed = ref(false);
  const selectedKeys = ref([route.name]);
  const openKeys = ref([]);
  const routerList = ref();
  watchEffect(() => {
    if (router?.options?.routes.length) {
      router?.options?.routes.forEach((item) => {
        if (item.path === '/') {
          routerList.value = item.children;
        }
      });
    }
  });
  const clickMenu = (item) => {
    router.push({ name: item.name });
  };
  const logout = () => {
    localStorage.removeItem('user');
    router.push({
      name: 'login',
    });
  };
</script>

<style lang="less" scoped>
  .vc-layout {
    .ant-layout-header {
      padding: 12px 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #fff;
      line-height: calc(@layout-header-height - 34px);
      .vc-logo {
        height: 100%;
        background: rgba(255, 255, 255, 0.2);
        padding: 5px 10px;
        font-size: 20px;
      }
      .vc-header {
        flex: 1;
      }
      .vc-user {
        display: flex;
        justify-content: space-evenly;
        align-items: center;
      }
    }
    .ant-layout-content {
      height: calc(100vh - @layout-header-height);
      padding: 0 20px 20px;
      .vc-container {
        background: #fff;
        height: calc(100% - 42px);
        overflow: auto;
        &::-webkit-scrollbar {
          width: 0;
        }
        border-radius: 8px;
        padding: 12px;
      }
    }
  }
</style>
